<template>
    <div class="menu-box">
        <div
            v-for="(item,key) in menuList"
            :key="key"
            class="menuItem"
            :style="{ width: itemWidth }"
            @click="jumpTo(item.url)"
        >
            <Icon :name="item.iconName" size="40" :color="iconColor" />
            <div class="menu-title">{{ item.name }}</div>
        </div>
    </div>
</template>
<script setup>
import { computed, defineEmits, defineProps, defineComponent } from 'vue';
import { Icon } from 'vant'
/**
 * @module 菜单宫格组件
 * @description 主菜单vue组件
 * @example  <MenuGrid :menuList="menuList" :rows="4"></menu>
 * @param menuList 传入的菜单列表
 * @param rows 每行展示菜单个数
 * @param color 菜单图标颜色
 */
const props = defineProps({
    menuList: {
        type: Array,
        default: []
    },
    rows: {
        type: Number,
        default: 4
    },
    iconColor:{
        type: String,
        default: ''
    }
})
const emit = defineEmits(['jumpTo'])
emit('jumpTo', 'params')
/**
 * @description 根据传入的每行个数计算每个menu所占宽度
 */
const itemWidth = computed(()=>{
    return 100/props.rows + 'vw'
}) 

</script>
<style lang="scss" scoped>
.menu-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .menuItem {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 180px;
        padding: 30px 0;
        .menu-title {
            margin-top: 20px;
            font-size: 28px;
            color: #fff;
        }
    }
}
</style>
